<template>
  <div class="product">
    <div class="product-list">
      <div class="product-item" v-for="item in productList" :key="item.name">
        <div class="product-img">
          <img :src="item.picture" alt="" />
        </div>
        <div class="product-name">{{ item.name }}</div>
        <van-tag plain color="#3dcfba" style="margin: 8px 0">免押金</van-tag>
        <div class="bottom">
          <div class="product-price">￥{{ item.price }}/天</div>
          <div class="product-start">{{ item.start }}</div>
        </div>
      </div>
    </div>
    <div class="more">
      <van-button round>查看更多<van-icon name="arrow" /></van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import product1 from '@/assets/image/product1.png'
import product2 from '@/assets/image/product2.png'
import product3 from '@/assets/image/product3.png'
import product4 from '@/assets/image/product4.png'

interface ProductItem {
  name: string
  price: number
  start: string
  isDeposit: 0 | 1 // 是否有押金 1有 0无
  picture: string
}

const productList: ProductItem[] = [
  {
    name: '顶配 iPhone Xs 256GB 全新',
    price: 6.88,
    start: '30天起租',
    isDeposit: 0,
    picture: product1
  },
  {
    name: 'iPhone 6s 64GB 全新',
    price: 6.88,
    start: '30天起租',
    isDeposit: 0,
    picture: product2
  },
  {
    name: '联想 Yoga Y700 13.3英寸 16+512GB',
    price: 6.88,
    start: '30天起租',
    isDeposit: 0,
    picture: product3
  },
  {
    name: '华硕 ZENBook UX303UB 15.6英寸 8GB+256GB',
    price: 6.88,
    start: '30天起租',
    isDeposit: 0,
    picture: product4
  }
]
</script>

<style scoped lang="less">
.product {
  width: 100vw;
  background-color: #f6f8fa;
  padding: 20px 10px 0 10px;
  box-sizing: border-box;

  .product-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;

    .product-item {
      background-color: #fff;
      padding: 8px;
      box-sizing: border-box;
      border-radius: 5px;

      .product-img {
        width: 100%;
        padding: 15px;
        text-align: center;
        box-sizing: border-box;
        img {
          height: 100px;
        }
      }

      .product-name {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .product-price {
          color: red;
        }

        .product-start {
          font-size: 12px;
          color: #969696;
        }
      }
    }
  }

  .more {
    text-align: center;
    button {
      width: 150px;
      height: 35px;
      line-height: 35px;
      font-size: 18px;
      color: #979797;
      background-color: transparent;
      margin: 20px auto;
    }
  }
}
</style>
